<!DOCTYPE html>
<html>

<head>
    <title>钩子函数</title>
    <meta charset="utf-8">
    <script src="http://cdn.bootcss.com/vue/2.1.10/vue.js"></script>

<body>

<div id="app">
    <p>{{ message }}</p>
    <input @click="change" type="button" value="更新数据"/>
    <input @click="destroy" type="button" value="销毁"/>
</div>

<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data: {
            message: "Welcome Vue"
        },
        methods: {
            change: function () {
                this.message = 'Datura is me';
            },
            destroy: function () {
                vm.$destroy();
            }
        },
        beforeCreate: function () {
            console.group('beforeCreate 创建前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:red", "data   : " + this.$data); //undefined
            console.log("%c%s", "color:red", "message: " + this.message); //undefined
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el); //undefined
            console.log("%c%s", "color:green", "data   : " + this.$data); //[object Object]  =>  已被初始化
            console.log("%c%s", "color:green", "message: " + this.message); //Welcome Vue  =>  已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:green", "el     : " + (this.$el)); //已被初始化
            console.log(this.$el); // 当前挂在的元素
            console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:green", "el     : " + this.$el); //已被初始化
            console.log(this.$el);
            console.log("%c%s", "color:green", "data   : " + this.$data); //已被初始化
            console.log("%c%s", "color:green", "message: " + this.message); //已被初始化
        },
        beforeUpdate: function () {
            alert("更新前状态");
            console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
            console.log("%c%s", "color:green", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green", "data   : " + this.$data);
            console.log("%c%s", "color:green", "message: " + this.message);
            alert("更新前状态2");
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:green", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:green", "data   : " + this.$data);
            console.log("%c%s", "color:green", "message: " + this.message);
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message);
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red", "el     : " + this.$el);
            console.log(this.$el);
            console.log("%c%s", "color:red", "data   : " + this.$data);
            console.log("%c%s", "color:red", "message: " + this.message)
        }
    })
</script>
</body>

</html>